<template>
  <div class="app-container" style="width: 600px;margin: 30px auto">
    <h3>量表测试</h3>
    <el-form label-width="80px" label-position="right" :model="info" ref="infoForm" >
      <el-row v-if="show.show1">
        <el-col :span="12">
          <span style="margin: 10px;">尿失禁问卷评估量表</span>
          <el-form-item label="总得分：" style="margin-top: 10px;">
            <el-input v-model="info.nsjdf" class="all" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="4" />
        <el-col :span="8">
          <el-button style="margin-top: 10px" @click="doTest(6)" type="primary" plain>问卷测试</el-button>
        </el-col>
      </el-row>

      <el-row v-if="show.show2">
        <el-col :span="12">
          <span style="margin: 10px;">尿潴留问卷评估量表</span>
          <el-form-item label="总得分：" style="margin-top: 10px;">
            <el-input v-model="info.nzldf" class="all" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="4" />
        <el-col :span="8">
          <el-button style="margin-top: 10px" @click="doTest(7)" type="primary" plain>问卷测试</el-button>
        </el-col>
      </el-row>

      <el-row v-if="show.show3">
        <el-col :span="12">
          <span style="margin: 10px;">大便失禁问卷评估量表</span>
          <el-form-item label="总得分：" style="margin-top: 10px;">
            <el-input v-model="info.dbsjdf" class="all" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="4" />
        <el-col :span="8">
          <el-button style="margin-top: 10px" @click="doTest(8)" type="primary" plain>问卷测试</el-button>
        </el-col>
      </el-row>

      <el-row v-if="show.show4">
        <el-col :span="12">
          <span style="margin: 10px;">便秘问卷评估量表</span>
          <el-form-item label="总得分：" style="margin-top: 10px;">
            <el-input v-model="info.bmdf" class="all" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="4" />
        <el-col :span="8">
          <el-button style="margin-top: 10px" @click="doTest(9)" type="primary" plain>问卷测试</el-button>
        </el-col>
      </el-row>

      <el-row style="float: right;margin-right: 20%;">
        <el-button type="danger" @click="analysis()">分析</el-button>
        <el-button type="warning" plain @click="save()">保存</el-button>
      </el-row>
    </el-form>
  </div>

  <el-dialog :width="600" v-model="dialogOpen" :title="dialogTitle" destroy-on-close >
    <TestPage :type="dialogType" :title="dialogTitle" @comfirm="commitTest" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { getCacheInfo, cacheInfo } from '@/utils/auth';
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { useRoute, useRouter } from 'vue-router';
import { scoreResult } from '@/api/login';
import TestPage from "./testPage";


const router = useRouter()
const infoCache = reactive(getCacheInfo())
const show = reactive({
  show1 :false,
  show2 :false,
  show3 :false,
  show4 :false
})

const created= () => {

  if (!infoCache.medical_record_num){
    ElMessageBox.confirm('还未填写基本信息，请先完成','提醒',
        {
          confirmButtonText: '去填写',
          showCancelButton	: false,
          type: 'warning',
        })
        .then(() => {
          router.push({ path: "/index" });
        })
        .catch(() => {
        })
    return
  }
  if (!infoCache.disorders_type){
    ElMessageBox.confirm('还未填写病史信息，请先完成','提醒',
        {
          confirmButtonText: '去填写',
          showCancelButton	: false,
          type: 'warning',
        })
        .then(() => {
          router.push({ path: "/step2" });
        })
        .catch(() => {
        })
    return
  }

  show.show1 = infoCache.disorders_type.includes('6')
  show.show2 = infoCache.disorders_type.includes('7')
  show.show3 = infoCache.disorders_type.includes('8')
  show.show4 = infoCache.disorders_type.includes('9')
}
interface Info{
  nsjdf: string
  nsjresult: string
  nzldf: string
  nzlresult: string
  dbsjdf: string
  dbsjresult: string
  bmdf: string
  bmresult: string
}

const info = reactive<Info>({
  nsjdf: null,
  nsjresult: null,
  nzldf: null,
  nzlresult: null,
  dbsjdf: null,
  dbsjresult: null,
  bmdf: null,
  bmresult: null
})

const dialogType = ref('')
const dialogOpen = ref(false);
const dialogTitle = ref('')
const infoForm = ref<FormInstance>()

const doTest = (type) => {
  if(type == 6){
    dialogTitle.value = '尿失禁问卷评估量表'
  } else if (type == 7){
    dialogTitle.value = '尿潴留问卷评估量表'
  } else if (type == 8){
    dialogTitle.value = '大便失禁问卷评估量表'
  } else if (type == 9) {
    dialogTitle.value = '便秘问卷评估量表'
  } else {
    return
  }
  dialogOpen.value = true
  dialogType.value = type
}

const commitTest = (obj) =>{
  console.log("test obj=",obj)
  let value = []
  for (const key in obj.result) {
    value.push(obj.result[key])
  }

  scoreResult({
        user_data_id:infoCache.id,
        disorders_type:obj.type + '',
        question_result:value.join() }).then(res => {
    // total_score
    // total_score_result
    // disorders_type
    if(obj.type == 6){
      info.nsjdf = res.total_score
      info.nsjresult = res.total_score_result
    } else if (obj.type == 7){
      info.nzldf = res.total_score
      info.nzlresult = res.total_score_result
    } else if (obj.type == 8){
      info.dbsjdf = res.total_score
      info.dbsjresult = res.total_score_result
    } else if (obj.type == 9){
      info.bmdf = res.total_score
      info.bmresult = res.total_score_result
    }
    dialogOpen.value = false
  })
}

const analysis = () => {
  if(checkTest()){
    return
  }
  const testRusult = []
  if(show.show1){
    testRusult.push({type:6, score:info.nsjdf, result:info.nsjresult})
  }
  if(show.show2){
    testRusult.push({type:7, score:info.nzldf, result:info.nzlresult})
  }
  if(show.show3){
    testRusult.push({type:8, score:info.dbsjdf, result:info.dbsjresult})
  }
  if(show.show4){
    testRusult.push({type:9, score:info.bmdf, result:info.bmresult})
  }
  infoCache.testRusult = testRusult
  cacheInfo(infoCache)


  if(show.show1 || show.show3) {
    //尿失禁和大便失禁
    router.push({path: "/emg0"})
  } else if (show.show4){
    //便秘采用之前的样式
    router.push({path: "/emg"})
  } else {
    //尿潴留的话不需要采集肌电数据
    router.push({path: "/result"})
  }
}

const save = () => {
  if(checkTest()){
    return
  }
}

const checkTest = function () {
  var v = !(show.show1 && info.nsjdf == undefined || info.nsjdf == '' ) &&
      !(show.show2 && info.nzlresult == undefined || info.nzlresult == '' ) &&
      !(show.show3 && info.dbsjdf == undefined || info.dbsjdf == '' ) &&
      !(show.show4 && info.bmdf == undefined || info.bmdf == '' );
  if( !v ){
    ElMessage.warning('请完成问卷！')
  }
  return !v;
}


created()
</script>

<style scoped>
.all {
  width: 100%;
}
.el-row {
  margin: 10px 0;
}
</style>
